<template>
    <div class="video-processor">
      <div class="form-section">
        <div class="form-group">
          <label for="folderInput">视频文件夹路径：</label>
          <input 
            id="folderInput"
            v-model="videoFolder" 
            type="text" 
            class="text-input" 
            placeholder="输入视频文件夹路径"
          />
        </div>
        
        <div v-if="watermarkImage" class="watermark-preview">
          <p>将使用此水印:</p>
          <img :src="watermarkImage" alt="水印预览" class="preview-img" />
        </div>
        <div v-else class="warning">
          请先在「创建水印」标签页中生成水印图片
        </div>
      </div>
      
      <div class="button-group">
        <button 
          @click="processVideos" 
          class="process-btn" 
          :disabled="!watermarkImage || !videoFolder || processing"
        >
          {{ processing ? '处理中...' : '开始处理视频' }}
        </button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, defineProps, defineEmits } from 'vue';
  import { processVideosWithWatermark } from '../services/watermarkService';
  
  const props = defineProps({
    watermarkImage: String
  });
  
  const emit = defineEmits(['process-complete']);
  
  const videoFolder = ref('');
  const processing = ref(false);
  
  async function processVideos() {
    if (!props.watermarkImage || !videoFolder.value) {
      alert('请提供水印图片和视频文件夹路径');
      return;
    }
    
    try {
      processing.value = true;
      
      // 将base64图片转换为文件对象
      const imageFile = await dataURLtoFile(props.watermarkImage, 'watermark.png');
      
      // 调用API处理视频
      const results = await processVideosWithWatermark(videoFolder.value, imageFile);
      
      // 通知父组件处理已完成
      emit('process-complete', results);
      processing.value = false;
    } catch (error) {
      console.error('Error processing videos:', error);
      alert('处理视频失败: ' + (error.message || '未知错误'));
      processing.value = false;
    }
  }
  
  // 工具函数：将dataURL转换为File对象
  async function dataURLtoFile(dataurl, filename) {
    const res = await fetch(dataurl);
    const blob = await res.blob();
    return new File([blob], filename, { type: 'image/png' });
  }
  </script>
  
  <style scoped>
  .video-processor {
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 6px;
  }
  
  .form-section {
    margin-bottom: 20px;
  }
  
  .form-group {
    margin-bottom: 15px;
  }
  
  label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
  }
  
  .text-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  
  .button-group {
    display: flex;
    justify-content: flex-end;
  }
  
  .process-btn {
    padding: 10px 20px;
    background: #4a6cf7;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
  }
  
  .process-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
  }
  
  .watermark-preview {
    margin: 15px 0;
  }
  
  .preview-img {
    max-width: 200px;
    max-height: 100px;
    border: 1px solid #ddd;
    margin-top: 5px;
  }
  
  .warning {
    color: #f56c6c;
    margin: 15px 0;
  }
  </style>